Перейти к основному содержимому

2.04. Конструкторы веб-сайтов

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ
Всем

Конструкторы веб-сайтов​

Конструкторы же используются для более простых способов создания сайтов - когда не нужно знать языки разметки, запросов и программирования - достаточно просто перейти на сайт конструктора или скачать программу, и используя пользовательский интерфейс (редакторы, перетаскивания, кнопки), расставить нужные элементы, всё собрать и сохранить.

Конструктор сайтов - это онлайн-инструмент или программа, которая позволяет собирать сайт визуально, перетаскивая элементы, выбирая шаблоны и редактируя текст. Вы выбираете шаблон, добавляете элементы, нажимаете сохранить и всё. Не нужно знать HTML, CSS, JavaScript.

★ WordPress – конструктор для создания блогов и сайтов (использует PHP и MySQL). Для начала работы можно использовать онлайн-конструктор, или скачать WordPress и установить локально.

Есть и иные конструкторы сайтов, которые можно использовать на свой вкус и даже без знания кода – Tilda, Wix, Webflow, 1C-UMI и Google Sites. У них большие библиотеки шаблонов, даже своя интересная логика. Конструкторы подойдут для малого бизнеса, а для более сложных сайтов лучше перейти к WordPress/Nginx/Tomcat.

Все конструкторы направлены на аудиторию новичков, не имеющих опыта в веб-разработке. На биржах фрилансеров основная масса заказов от начинающих предпринимателей как раз на разработку или вёрстку сайта на платформе WordPress или Tilda. Вот их и рассмотрим.

Шаблон — это уже готовый дизайн сайта с определённой структурой (например, страница с заголовком, меню, блоками текста и изображений). Конструкторы предлагают сотни шаблонов, разделённых по категориям: лендинги, блоги, магазины, портфолио и т.д.

Большинство конструкторов работают по модели freemium: базовый функционал бесплатный, но с ограничениями (реклама платформы, поддомен, ограниченное место). Чтобы получить домен, убрать рекламу, добавить интернет-магазин или аналитику — нужно перейти на платный тариф.

Также доступны расширения (или приложения) — дополнительные модули (например, чат-бот, форма обратной связи, система бронирования), которые можно подключить к сайту. Многие из них платные. Как и в смартфоне есть App Store, в конструкторах есть каталог приложений. Это сторонние или внутренние сервисы, которые расширяют функциональность сайта - подключение к аналитике, интеграции, онлайн-оплата, формы сбора заявок.

Сложная логика (например, синхронизация с CRM или учётной системой) требует интеграции, которую либо делает сама платформа, либо подключает разработчик (часто за отдельную плату).

Когда вы создаёте сайт в Tilda, Wix или Webflow, вам не нужно вручную устанавливать веб-сервер, базу данных или хостинг. Всё происходит автоматически:

  1. Вы редактируете сайт в браузере.
  2. Конструктор сохраняет ваш контент в своей облачной базе данных.
  3. При публикации генерируются HTML, CSS, JavaScript-файлы, именно они формируют внешний вид и поведение сайта.
  4. Эти файлы размещаются на веб-серверах провайдера.
  5. Сайт становится доступен по URL.

Таким образом, конструктор берёт на себя всю техническую часть: хостинг, безопасность, резервное копирование и масштабирование. Но! Если вы хотите выйти за рамки стандартных возможностей — например, добавить сложную форму обработки данных — может потребоваться кастомная интеграция через API или даже написание собственного бэкенда.

Я бы выделил три ключевых типа сайтов, разрабатываемых на конструкторах:

  • Лендинг (landing page) - одностраничный сайт, цель которого — побудить пользователя к действию: купить, подписаться, оставить заявку. Пример: промо-страница нового курса.
  • Сайт-визитка - краткая информация о человеке, компании или проекте: кто вы, чем занимаетесь, как с вами связаться. Часто используется фрилансерами и малым бизнесом.
  • Блог - сайт, где регулярно публикуются статьи, новости или мнения. Может быть частью большого сайта или существовать самостоятельно.

Конструкторы технически представляют собой CMS.

CMS (Content Management System) — система управления контентом. Это программное обеспечение, которое позволяет создавать, редактировать и управлять содержимым сайта без знания кода. Проще говоря: CMS — это «админка», где вы меняете текст, добавляете картинки и публикуете новости, как в соцсетях.

Конструкторы сайтов стараются встраивать SEO-возможности «из коробки»: автоматическое формирование метатегов, чистые URL, sitemap.xml. Но эффективность зависит от платформы и действий пользователя.

SEO (Search Engine Optimization) — это поисковая оптимизация. Цель — сделать сайт более заметным в результатах поиска (Google, Яндекс и др.).

Что включает SEO?

  • SEO-структура сайта: правильная организация страниц (главная → услуги → контакты), понятные URL (site.ru/uslugi/dizain), навигация.
  • SEO-оптимизация: использование ключевых слов в заголовках, мета-описаниях, атрибутах изображений, качественный контент.

Конструкторы всегда имеют визуальный редактор с drag-and-drop.

Визуальный редактор - интерфейс, в котором сайт можно редактировать «на глаз», как в графическом редакторе. Вы видите, как будет выглядеть страница, прямо во время редактирования.

Drag and drop (перетаскивание) - это такой метод взаимодействия, вы берёте элемент (текст, кнопку, фото) мышкой, перетаскиваете его на нужное место и отпускаете, словно собираете паззл, складывая сайт из готовых частей - блоков.

Блоки - это модульные элементы, из которых собирается страница: заголовок, текстовый блок, карусель изображений, видео, форма. Конструкторы (особенно Tilda и Webflow) предлагают библиотеки блоков, которые можно комбинировать.

WordPress​

WordPress — это система управления контентом (CMS) с открытым исходным кодом, позволяющая создавать сайты любой сложности: от блогов до интернет-магазинов.

Чтобы понимать, что собой представляет WordPress, проще всего сначала открыть эту ссылку - https://wordpress.com/themes Там можно увидеть множество вариаций представления сайта. Можете ознакомиться и примерно представить, для чего и как можно использовать их.

На текущий момент существует два варианта:

  • WordPress.com, облачная платформа, не требующая хостинга. Новичкам лучше начать с неё, но здесь меньший контроль.
  • WordPress.org, скачиваемая программа для установки на свой хостинг. Полный контроль, но требуется немного технических знаний.

Чтобы сайт был в интернете, нужны:

  • Домен - адрес сайта (например, timur123.ru)
  • Хостинг - сервер, где будут храниться файлы сайта.

Технически, мы покупаем домен у регистратора, например, Reg.ru, выбираем хостинг и на хостинге устанавливаем WordPress через панель управления. Будто покупаем земельный участок и строим дом на нём.

WordPress предоставляет довольно дружелюбное к пользователям руководство по установке. Для установки понадобится PHP, MySQL или MariaDB.

На хостинге запускается мастер установки WordPress:

  1. выбираем базу данных;
  2. задаём логин и пароль администратора;
  3. устанавливаем.

При этом на сервер загружаются файлы WordPress, которые включают в себя PHP, HTML, CSS, JS. Создаётся база данных, где будут храниться тексты, настройки, пользователи. И после установки можно зайти в «админку» (панель администратора) - просто перейдя по ссылке «вашсайт.ru/wp-admin».

Страницы передаются через веб-сервер, как раз Apache или Nginx.

В WordPress шаблон называется тема (theme). Можно сначала установить бесплатную тему, активировать её, определив внешний вид сайта - цвета, шрифты, расположение элементов.

Затем уже добавляется контент. С 2018 года WordPress использует блоковый редактор Gutenberg — он работает по принципу drag-and-drop. Просто добавляются страницы, а уже на них добавляются блоки. Можно начать с базового:

  1. создать страницу;
  2. добавить блок «Заголовок»;
  3. добавить блок «Текст».

Каждый блок можно настроить по стилю, указав цвет, размер и выравнивание. Технически, это кусочек HTML/CSS/JS, который редактируется визуально.

Если устанавливать плагины (модули), можно расширить функциональность WordPress. Плагины работают на стороне сервера (PHP) и клиента (JavaScript). Они могут замедлять сайт, если их слишком много.

Итогом настройки будет публикация. Как только нажимаем кнопку «Опубликовать», контент сохраняется в базе данных, а при запросе пользователя веб-сервер (Apache/Nginx) вызывает PHP-скрипты WordPress, и HTML-страницы собираются динамически из шаблона и данных в БД. Браузеру пользователя отправляется уже готовая страница.

Это называется динамическая генерация страниц — в отличие от статических сайтов, где каждая страница — отдельный файл. Именно поэтому классический, «ванильный» HTML/CSS/JS набор называется статическим.

WordPress-сайт можно экспортировать, а производительность зависит от хостинга и оптимизации. Можно даже себе свой физический сервер выделить, и развернуть там. Помню, на моём опыте первый крупный портал для работы клиентов мы делали как раз через WordPress.

Tilda​

Tilda — облачный конструктор сайтов, ориентированный на визуальное проектирование без кода, особенно эффективен для лендингов и презентационных проектов.

Tilda — это онлайн-платформа для создания сайтов без программирования. Она не требует хостинга, домена или знания HTML. Всё происходит в браузере - аналогично, редактируется страница как макет в графическом редакторе, а Tilda сама заботится о публикации.

Есть домены tilda.ru и tilda.cc - можно зайти, зарегистрироваться и создать проект бесплатно. В принципе, это всё для начала - ни хостинга, ни базы данных, ни серверов. Tilda — это SaaS-платформа (Software as a Service), программа работает в облаке. Это модель, при которой программа работает в облаке, а пользователь получает к ней доступ через браузер.

Tilda предлагает сотни готовых шаблонов, разделённых по типам - лендинги, сайты-визитки, портфолио, онлайн-курсы.

В Tilda есть более 300 типов блоков, каждый — с настройками стиля, анимации и поведения - добавляется блок, заполняется контентом. Здесь тоже каждый блок — это HTML + CSS + JavaScript, но ты не видишь код. Всё делается визуально.

Интерфейс Tilda — это канвас (холст), на котором пользователь перетаскивает блоки, меняет их порядок, редактирует стиль. Все изменения отражаются мгновенно, результат сразу отображается в браузере. Такой визуальный редактор также называют WYSIWYG-редактор (What You See Is What You Get — «что видишь, то и получишь»).

Можете попробовать создать сайт, добавить туда страницы:

  • Главная;
  • Портфолио;
  • Обо мне;
  • Контакты.

Публикация сайта осуществляется почти полностью автоматически - генерируются статические HTML-страницы (или динамические, в зависимости от настроек), сайт размещается на веб-серверах Tilda, подключается SSL-сертификат (для HTTPS), и предоставляется ссылка. Если же купите домен, то разумеется можно привязать к нему, через DNS-настройки.

По сравнению с WordPress, гибкость ниже, некоторые вещи имеют более ограниченный контроль. Мы теряем контроль над деталями, но получаем красивый сайт быстро. К примеру, база данных скрыта от пользователя - находится в облаке на серверах Tilda. Также важно отметить, что Tilda - не CMS (как WordPress), а визуальная студия для контента, можно сказать.

При использовании Tilda ваш сайт привязан к платформе. Если Tilda изменит политику, поднимет цены или закроется — вы не сможете просто «скачать» свой сайт и перенести его. В WordPress такой проблемы нет: у вас всегда есть доступ к файлам и базе данных, можно сделать резервную копию и перенести на другой хостинг.